import React from "react"
import { Navigator, Image, Text, View } from "@tarojs/components"
import clsx from "clsx"
import { commonUrls } from "@/utils/router"

type IProps = {
  className?: string
}
/** `专业解读`页顶部两张卡片 */
const GpExplainColumn: React.FC<IProps> = (props: IProps) => {
  const { className } = props
  return (
    <View className={clsx("flex flex-row justify-between", className)}>
      <Navigator
        url={commonUrls.column}
        hoverClass="none"
        className="w-335px h-184px overflow-hidden box-border pl-39px py-43px relative"
      >
        <Image
          src="https://static.91goodschool.com/UpFiles/public/yikao/image/yibk-pic.png"
          className="w-335px h-184px cover-image"
        />
        <View className="yahei font-normal flex flex-col justify-between h-full relative z-1">
          <View className=" text-32px text-hex-2c2c35">
            <Text>艺考百科</Text>
          </View>
          <View className=" text-26px text-hex-b8b8bf">
            <Text>报考全流程</Text>
          </View>
        </View>
      </Navigator>
      <Navigator
        url={commonUrls.columnArticle}
        hoverClass="none"
        className="w-335px h-184px overflow-hidden box-border pl-39px py-43px relative"
      >
        <Image
          src="https://static.91goodschool.com/UpFiles/public/yikao/image/ztwz-pic.png"
          className="w-335px h-184px cover-image"
        />
        <View className="yahei font-normal flex flex-col justify-between h-full relative z-1">
          <View className=" text-32px text-hex-2c2c35">
            <Text>专题文章</Text>
          </View>
          <View className=" text-26px text-hex-b8b8bf">
            <Text>艺考知识库</Text>
          </View>
        </View>
      </Navigator>
    </View>
  )
}
export default GpExplainColumn
